<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-grid.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-grid-sorter.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-grid-filter.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-date-picker.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-combo-box.html">
<link rel="import" href="../../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../view-app.html">
<link rel="import" href="../style/shared-styles.html">

<dom-module id="view-dashboard-notification">
  <template>
    <style include="shared-styles app-grid-style">
       :host {
        margin: 10px;
        display: block;
        --app-grid-columns: 1;
      }

      .btn {
        margin: 20px 0 4px 0;
        width: 350px;
      }

      vaadin-combo-box#notificationFilter,
      vaadin-date-picker#notificationDateSelector {
        width: 250px;
        vertical-align: 0;
        }
    </style>
    <firebase-auth app-name="smart-mes" id="auth" user="{{user}}"></firebase-auth>
    <firebase-document app-name="smart-mes" id="userData" path="/user/[[user.uid]]" data="{{k}}"></firebase-document>
    <firebase-query app-name="smart-mes" id="notificationQuery" path="/data/[[k.key]]/notificationData" order-by-child="created"
      data="{{notificationData}}"></firebase-query>
    <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
    <ul class="app-grid">
      <li>
        <div class="card">
          <h1 class="title">{{localize('notification-center')}}</h1>
          <div class="filter-bar">
            <vaadin-combo-box label="{{localize('notification-type')}}" id="notificationFilter" value="{{type}}" items="[[filterItems]]"
              item-value-path="value" item-label-path="name" error-message="Invalid Input" required always-float-label='true'>
              <template>
                <paper-item>
                  <paper-item-body style="min-height: 0">
                    <div readonly>{{localize(item.value)}}</div>
                  </paper-item-body>
                </paper-item>
              </template>
            </vaadin-combo-box>
            <vaadin-date-picker label="Notification Date" max="2030-01-01" name="notification date" id="notificationDateSelector" initial-position="[[todayDate]]"
              value="{{date}}" error-message="Invalid input" required always-float-label='true'></vaadin-date-picker>
          </div>
          <vaadin-grid id="notificationTable" aria-label="Notification Center" items="[[filterNotification(notificationData, date, type)]]">
            <vaadin-grid-column flex="1">
              <template class="header">
                <div class="cell">#</div>
              </template>
              <template>
                <div class="cell">[[index]]</div>
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column flex="1">
              <template class="header">
                <vaadin-grid-sorter path="type">
                  <div class="cell">
                    {{localize('type')}}
                  </div>
                </vaadin-grid-sorter>
              </template>
              <template>
                <div class="cell" style$="color:[[getColorType(item.type)]]">
                  {{localize(item.type)}}
                </div>
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column flex-grow="1" flex="1">
              <template class="header">{{localize('detail')}}</template>
              <template>
                <div class="cell">[[item.detail]]</div>
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column flex="1">
              <template class="header">{{localize('datetime')}}</template>
              <template>
                <div class="cell">[[getDate(item.created)]]</div>
              </template>
            </vaadin-grid-column>
          </vaadin-grid>
          <div class="center">
            <paper-button class="btn" on-click="clearNotification">
              {{localize('clear-all-notifications')}}
            </paper-button>
          </div>
          <paper-toast id="toastAlert" always-on-top horizontal-align="right" text="{{localize(toastText)}}"></paper-toast>
        </div>
      </li>
    </ul>
  </template>
  <script>
    /**
     * @ViewDashboardNotification
     * @polymer 
     * @extends {Polymer.Element}
     */
    class ViewDashboardNotification extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
      Polymer.Element) {
      static get is() {
        return 'view-dashboard-notification'
      }
      static get properties() {
        return {
          todayDate: String,
          toastText: String,
          language: String,
          notificationData: {
            type: Object,
            notify: true
          },
          type: {
            type: String,
            value: "default"
          },
          filterItems: {
            type: Array,
            value: () => {
              return [{
                  "name": "Default",
                  "value": "default"
                },
                {
                  "name": "Normal",
                  "value": "normal"
                },
                {
                  "name": "Warning",
                  "value": "warn"
                },
                {
                  "name": "Critical",
                  "value": "critical"
                }
              ]
            }
          }
        }
      }

      connectedCallback() {
        super.connectedCallback()
        this.loadResources(this.resolveUrl('../../data/locales.json'))
      }

      ready() {
        super.ready()
        this.setNotificationDatePosition()
      }

      filterNotification(data, date, type) {
        const selectTimestamp = new Date(date)
        switch (type) {
          case "default":
            return data
            break
          case "normal":
            return data.filter(d => d.type === "normal" && new Date(d.created * 1000).toDateString() ===
              selectTimestamp.toDateString())
            break
          case "warn":
            return data.filter(d => d.type === "warn" && new Date(d.created * 1000).toDateString() ===
              selectTimestamp.toDateString())
            break
          case "critical":
            return data.filter(d => d.type === "critical" && new Date(d.created * 1000).toDateString() ===
              selectTimestamp.toDateString())
            break
          default:
            return data
        }
      }

      setNotificationDatePosition() {
        const today = new Date()
        let dd = today.getDate()
        let mm = today.getMonth() + 1
        let yyyy = today.getFullYear()
        if (dd < 10) {
          dd = '0' + dd
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        this.todayDate = yyyy + '-' + mm + '-' + dd
        this.$.notificationDateSelector.value = yyyy + '-' + mm + '-' + dd
      }

      clearNotification() {
        if (confirm("Are you sure do you want to clear all notifacation ?") == true) {
          this.$.notificationQuery.ref.remove()
          this.toastText = "notification-delete-successfully"
          this.$.toastAlert.open()
        }
      }

      getColorType(type) {
        switch (type) {
          case 'normal':
            return '#7CB342'
            break
          case 'warn':
            return '#FFB300'
            break
          case 'critical':
            return '#E53935'
            break
          default:
            return '#202020'
        }
      }

      getDate(timestamp) {
        let today = new Date(timestamp * 1000)
        let dd = today.getDate()
        let m = today.getMonth() + 1 //January is 0!
        let yyyy = today.getFullYear()
        let hh = today.getHours()
        let mm = today.getMinutes()
        let ss = today.getSeconds()
        if (dd < 10) {
          dd = '0' + dd
        }
        if (m < 10) {
          m = '0' + m
        }
        if (hh < 10) {
          hh = '0' + hh
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        if (ss < 10) {
          ss = '0' + ss
        }
        let date = dd + '/' + m + '/' + yyyy + ' | ' + hh + ':' + mm + ':' + ss
        return date
      }
    }
    customElements.define(ViewDashboardNotification.is, ViewDashboardNotification)
  </script>
</dom-module>